<template>
  <div class="goods">
    <div class="header">
      <el-input v-model="searchContent" placeholder="请输入商品名称进行搜索..."></el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button type="primary">
        <router-link to="/goods-add">页面添加</router-link>
      </el-button>

      <el-button type="primary" @click="addGoods">弹窗添加</el-button>
    </div>
    <div class="wrapper">
      <el-table :data="tableData" border>
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop="id" label="商品ID" width="70"></el-table-column>
        <el-table-column prop="title" label="商品名称" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="price" label="商品价格" width="80"></el-table-column>
        <el-table-column prop="num" label="商品数量" width="80"></el-table-column>
        <el-table-column prop="category" label="商品类目" width="80"></el-table-column>
        <el-table-column prop="image" label="商品图片" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sellPoint" label="商品买点" show-overflow-tooltip></el-table-column>
        <el-table-column prop="descs" label="商品描述" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="paginations.page_index" :page-sizes="paginations.page_sizes"
          :page-size="paginations.page_size" :layout="paginations.layout" :total="paginations.total">
        </el-pagination>
      </div>


    </div>
    <!-- 弹窗 -->
    <GoodsDialog :dialogVisible="dialogVisible" @changeDialog="changeDialog" :operateType="operateType"
      :rowData="rowData"></GoodsDialog>
  </div>
</template>

<script>
import GoodsDialog from './GoodsDialog.vue'
export default {
  components: { GoodsDialog },
  data() {
    return {
      operateType: '添加商品',  // 是添加数据还是修改数据
      input: '',
      tableData: [],
      allTableData: [],
      filterTableData: [],
      paginations: {
        page_index: 1,  // 当前页
        total: 0,  // 总数
        page_size: 10,  // 默认每页显示多少条
        page_sizes: [5, 10, 15, 20],  // 选择每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper"
      },
      // 搜索
      searchContent: '',
      dialogVisible: false,
      rowData: {},  // 当前行的数据
    }
  },
  methods: {
    handleEdit(index, row) {
      this.dialogVisible = true
      this.operateType = '编辑商品'
      // console.log(row)
      this.rowData = row
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该用户，是否继续？', "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.$message('do something')
        this.$axios.post(`/goods/delete/${row.id}`)
          .then(res => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getList();
          })
      })

    },
    getList() {
      this.$axios.get('/goods/list')
        .then(res => {
          // console.log(res.data)
          // this.tableData = res.data
          this.allTableData = res.data
          this.filterTableData = res.data
          this.setPaginations()
        })
    },

    // 分页相关函数
    setPaginations() {
      this.paginations.total = this.allTableData.length
      this.paginations.page_index = 1
      this.tableData = this.allTableData.filter((item, index) => index < this.paginations.page_size)
      // console.log(this.allTableData[0])

    },
    handleSizeChange(page_size) {
      this.paginations.page_index = 1
      this.paginations.page_size = page_size
      this.tableData = this.allTableData.filter((item, index) => {
        return index < page_size
      })

    },
    // 页面跳转
    handleCurrentChange(page) {
      const index = this.paginations.page_size * (page - 1)
      const nums = this.paginations.page_size * page
      const tables = []
      for (let i = index; i < nums; i++) {
        if (this.allTableData[i]) tables.push(this.allTableData[i])
      }
      this.tableData = tables
    },

    // 搜索
    handleSearch() {
      if (!this.searchContent) {
        this.$message({ type: 'warning', message: '请输入商品名称进行搜索！' })
      }
      this.allTableData = this.filterTableData.filter((item, index) => {
        return this.searchContent === item.title
      })
      this.setPaginations()
    },

    // 弹框添加商品
    addGoods() {
      // console.log('弹框添加商品')
      this.dialogVisible = true
      this.operateType = '添加商品'
    },

    // 自定义事件--changeDialog
    changeDialog() {
      this.dialogVisible = false
      this.getList()
    }
  },
  created() {
    this.getList();
  }
}
</script>

<style lang="less" scoped>
.goods {
  margin: 20px;
}

.header {
  display: flex;

  button {
    margin-left: 20px
  }
}

.wrapper {
  margin: 20px 0;
}

.pagination {
  float: right;
  margin-top: 10px;
}
</style>